<template>
  <div class="tactics">
    <div class="searchTop">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="策略搜索">
          <el-input v-model="policyName" size="medium" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="medium" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_main">
      <div class="table_button">
        <el-button icon="el-icon-circle-plus-outline" size="medium" type="warning" @click="addOrEditPolicy('add')">新建</el-button>
      </div>
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
        />
        <el-table-column
          prop="policyName"
          label="策略名称"
          width="180"
        />
        <el-table-column
          prop="discount"
          label="策略方案"
        />
        <el-table-column
          prop="createTime"
          label="创建日期"
        >
          <template slot-scope="{row}">
            <span>{{ $dayjs(row.createTime).format('YYYY.MM.DD HH:mm:ss') }}</span>
            <!-- <span>{{ time }}</span> -->
          </template>
        </el-table-column>
        <el-table-column

          label="操作"
          width="150"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="checkDetail(row.policyId,row.policyName)">查看详情</el-button>
            <el-button type="text" size="small" @click="addOrEditPolicy('edit',row.policyId)">修改</el-button>
            <el-button type="text" size="small" style="color: red;" @click="del(row.policyId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="40%"
      @close="closePolicy"
    >
      <el-form :model="addForm" label-width="100px" class="dialog_ruleForm">
        <el-form-item label="策略名称" style="font-size:13px">
          <el-input v-model="addForm.policyName" maxlength="15" show-word-limit />
        </el-form-item>
        <el-form-item label="策略方案">
          <el-input-number v-model="addForm.discount" controls-position="right" style="weight:100%" :min="1" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="closePolicy">取消</el-button>
          <el-button @click="submitAddForm()">确定</el-button>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
    <dailogTaber ref="dailogTaberRef" />

  </div>
</template>
<script>
// import Pagination from '@/components/Pagination/index.vue'
import dailogTaber from './components/dailogTaber.vue'
import { getTacticsRequest, delTacticsRequest, addTacticsRequest, checkTacticsDetailRequest, editTacticsDetailRequest } from '../../api/tactics.js'

export default {
  name: '',
  components: {
    dailogTaber
  },
  data() {
    return {
      title: '',
      daiLogTableValue: false,
      formInline: {},
      tableData: [],
      // ruleForm: {
      //   name: ''
      // },
      // rules: {
      //   name: [
      //     { required: true, message: '请输入活动名称', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ]
      // },
      // 渲染table
      totalCount: '',
      totalPage: '',
      pageIndex: 1,
      pageSize: 10,
      // 搜索
      policyName: null,
      // 新增策略
      centerDialogVisible: false,
      // 新增对象
      addForm: {
        policyName: '',
        discount: undefined
      },
      currentId: null
    }
  },
  computed: {
    // time(ctime) {
    //   // console.log();
    //   return dayjs().format('YYYY-MM-DD')
    // }
  },
  created() {
    this.getTactics()
  },
  methods: {
    // 点击查看详情
    checkDetail(id, policyName) {
      console.log(id, 8989)
      this.$refs.dailogTaberRef.openDialog(id, policyName)
    },
    // ----------------------------------------
    // 新增策略 打开对话框
    async addOrEditPolicy(type, id) {
      this.centerDialogVisible = true
      if (type === 'add') {
        // 添加
        this.title = '添加策略'
        return
      }
      // 编辑
      this.title = '修改策略'
      // 发送请求 数据回显
      this.currentId = id
      const res = await checkTacticsDetailRequest(id)
      this.addForm.discount = res.data.discount
      this.addForm.policyName = res.data.policyName
      console.log(res, 'check')
    },
    // 关闭 新增策略
    closePolicy() {
      this.centerDialogVisible = false
      // this.addForm.discount = undefined
      // this.addForm.policyName = ''
      // 还原为初始状态
      this.addForm = this.$options.data().addForm
    },
    // 新增策略 / 修改策略 点击确认
    async submitAddForm() {
      if (this.title === '修改策略') {
        const res = await editTacticsDetailRequest(this.currentId, this.addForm)
        console.log(res, '333')
        this.getTactics()
        this.centerDialogVisible = false
        return
      }
      // 新增策略
      this.centerDialogVisible = false
      // 发送请求
      const res = await addTacticsRequest(this.addForm)
      console.log(res, 'add')
      this.getTactics()
    },
    // ----------------------------------------
    // 点击删除
    async del(id) {
      const res = await delTacticsRequest(id)
      console.log(res, 'del')
      this.getTactics()
    },
    // table渲染
    async getTactics() {
      const res = await getTacticsRequest({ pageIndex: this.pageIndex, pageSize: this.pageSize })
      console.log(res, 'tactics')
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
      this.tableData = res.data.currentPageRecords
    },

    // 点击搜索
    async search() {
      const res = await getTacticsRequest({ pageIndex: this.pageIndex, pageSize: this.pageSize, policyName: this.policyName })
      console.log(res, 7)
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
      this.tableData = res.data.currentPageRecords
    }

  }
}
</script>
<style lang="scss">
  .searchTop {
    .el-form-item__label {
      font-weight: 400;
    }
  }
  .dialog_ruleForm{
    label{
      font-weight: 400;
    }
    .el-form-item__content{
      .el-button:nth-child(1){
        margin-left: 100px;
      }
    }
  }
  .tactics{
    .el-input-number{
      width: 100%;
    }
  }
</style>
<style lang='scss'  scoped>
.searchTop{
  height: 64px;
  width: 100%;
  padding: 14px 0;
  padding-left: 20px;
  margin-bottom: 20px;
  display: flex;
  background-color: #fff;

}
.table_main{
  padding: 20px;
  background-color: #fff;
  .table_button{
    padding-bottom: 20px;
  }
}

</style>
